<template>
  <div class="mobile-page" :class="bgStyle===0?'':'pageOn'" :style="{marginTop:slider+'px',background:activeColor}">
    <div class="home_product">
      <!-- 单列 -->
      <template>
        <div class="stylist-list">
          <div
              v-for="(stylist, index) in list"
              :key="index"
              class="stylist-card"
              :style="{backgroundColor:itemBgColor}" :class="conStyle?'itemOn':''"
          >
            <img
                class="avatar"
                :src="stylist.avatar"
                mode="aspectFill"
            >
            <div class="info">
              <div class="name-row">
                <span class="name" :style="{color:titleColor}">{{ stylist.name }}</span>
              </div>
<!--              <span class="title">{{ stylist.title }}</span>-->
              <div class="stats">
<!--                <div class="stat-item">-->
<!--                  <span>{{ stylist.rating }}分</span>-->
<!--                </div>-->
                <div class="stat-item">
                  <span>已服务{{ stylist.num }}人</span>
                </div>
              </div>
              <div class="price-row">
                <span class="price" :style="'color:'+fontColor+';'">
<!--                  ￥{{ stylist.price }}-->
                </span>
                <div
                    class="book-btn"
                    :class="{ 'full': stylist.full }"
                >
                  {{ stylist.full ? '已约满' : '立即预约' }}
                </div>
              </div>
            </div>

          </div>
        </div>
      </template>

    </div>
  </div>

</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2024 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  mapState
} from 'vuex'
import {staffLstApi} from "@/api/reservation";

export default {
  name: 'home_staff_list',
  cname: '服务者列表',
  configName: 'c_home_service_list',
  icon: 'iconleijiyonghu',
  type: 0, // 0 基础组件 1 营销组件 2工具组件
  defaultName: 'staffList', // 外面匹配名称
  props: {
    index: {
      type: null
    },
    num: {
      type: null
    }
  },
  computed: {
    ...mapState('mobildConfig', ['defaultArray'])
  },
  watch: {
    pageData: {
      handler(nVal, oVal) {
        this.setConfig(nVal)
      },
      deep: true
    },
    num: {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[nVal]
        this.setConfig(data)
      },
      deep: true
    },
    'defaultArray': {
      handler(nVal, oVal) {
        let data = this.$store.state.mobildConfig.defaultArray[this.num]

        this.setConfig(data);
      },
      deep: true
    }
  },
  data() {
    return {
      // 默认初始化数据禁止修改
      defaultConfig: {
        name: 'staffList',
        timestamp: this.num,
        themeColor: {
          title: '背景颜色',
          name: 'themeColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        },
        itemBgColor: {
          title: '内容背景颜色',
          name: 'itemBgColor',
          default: [{
            item: '#fff'
          }],
          color: [{
            item: '#fff'
          }]
        },
        titleColor: {
          title: '标题颜色',
          name: 'titleColor',
          default: [{
            item: '#303133'
          }],
          color: [{
            item: '#303133'
          }]
        },
        fontColor: {
          title: '价格颜色',
          name: 'fontColor',
          default: [{
            item: '#ef022e'
          }],
          color: [{
            item: '#ef022e'
          }]
        },
        numConfig: {
          val: 6
        },
        bgStyle: {
          title: '背景样式',
          name: 'bgStyle',
          type: 0,
          list: [{
            val: '直角',
            icon: 'iconPic_square'
          },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        conStyle: {
          title: '内容样式',
          name: 'conStyle',
          type: 0,
          list: [
            {
              val: '直角',
              icon: 'iconPic_square'
            },
            {
              val: '圆角',
              icon: 'iconPic_fillet'
            }
          ]
        },
        mbConfig: {
          title: '页面间距',
          val: 0,
          min: 0
        },
      },
      navlist: [],
      imgStyle: '',
      txtColor: '',
      itemBgColor: '',
      slider: '',
      tabCur: 0,
      list: [],
      activeColor: '',
      fontColor: '',
      titleColor: "",
      bgStyle: 0,
      conStyle: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.pageData = this.$store.state.mobildConfig.defaultArray[this.num]
      this.getStaffLst(this.pageData)
    })
  },
  methods: {
    setConfig(data) {
      if (!data) return
      if (data.mbConfig) {
        this.activeColor = data.themeColor.color[0].item;
        this.fontColor = data.fontColor.color[0].item;
        this.titleColor = data.titleColor.color[0].item;
        this.itemBgColor = data.itemBgColor.color[0].item;
        this.slider = data.mbConfig.val;
        this.bgStyle = data.bgStyle.type;
        this.conStyle = data.conStyle.type;
      }
    },
    getStaffLst(data) {
      staffLstApi({page:1,limit:data.numConfig.val}).then(res => {
        this.list = res.data.list
        this.setConfig(this.pageData)
      })
    }

  }
}
</script>
<style scoped lang="scss">
.pageOn {
  border-radius: 8px;
}


/* 造型师卡片 */
.stylist-card {
  margin: 10px;
  background: #fff;
  display: flex;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

  &.itemOn {
    border-radius: 12px;
    margin-bottom: 6px;
    border-bottom: unset;
  }

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    margin-right: 15px;
  }

  .info {
    flex: 1;

    .name-row {
      display: flex;
      align-items: center;
      gap: 8px;

      .name {
        font-size: 18px;
        font-weight: 500;
      }

      .icon-cert {
        width: 18px;
        height: 18px;
      }
    }

    .title {
      font-size: 14px;
      color: #999;
      margin: 6px 0;
    }

    .stats {
      display: flex;
      gap: 20px;
      margin: 10px 0;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 13px;
        color: #666;

        .icon-stat {
          width: 12px;
          height: 12px;
        }
      }
    }

    .price-row {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .price {
        font-size: 14px;
        font-weight: bold;
      }

      .book-btn {
        background: linear-gradient(135deg, #ff2945, #ff0037);
        color: #fff;
        border-radius: 20px;
        padding: 6px 20px;
        font-size: 14px;

        &.full {
          background: #eee;
          color: #999;
        }
      }
    }
  }
}
</style>
